<template>
  <component :is="tag" :row="row" :value="value" :raw="raw" />
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import type { Component } from 'vue';

  import { Row } from '../../elementui';
  import { CellName, getCell } from '../cells';

  const props = defineProps<{
    cell?: CellName;
    row: Row;
    name: string;
  }>();

  const tag = computed<Component>(() => getCell(props.cell || 'span'));

  const value = computed<unknown>(() => props.row[props.name]);

  const raw = computed<unknown>(() => props.row['$' + props.name]);
</script>

<style scoped></style>
